<!-- <template>
  <view class="payment-container">
    <!-- 自定义导航栏 -->
    <view class="custom-navbar">
      <view class="navbar-left" @click="goBack">
        <u-icon name="arrow-left" size="20" color="#333"></u-icon>
      </view>
      <view class="navbar-title">订单支付</view>
      <view class="navbar-right"></view>
    </view>

    <!-- 订单信息卡片 -->
    <view class="order-info-card">
      <view class="card-header">
        <u-icon name="shopping-cart" size="20" color="#ff4444"></u-icon>
        <text class="header-title">订单信息</text>
      </view>
      
      <!-- 加载状态 -->
      <view v-if="isLoading" class="loading-state">
        <u-loading-icon mode="spinner" size="40"></u-loading-icon>
        <text class="loading-text">正在获取订单信息...</text>
      </view>
      
      <!-- 错误状态 -->
      <view v-else-if="loadError" class="error-state">
        <u-icon name="error-circle" size="40" color="#ff4444"></u-icon>
        <text class="error-text">订单信息获取失败</text>
        <button class="retry-button" @click="retryLoad">重新加载</button>
      </view>
      
      <!-- 订单详情 -->
      <view v-else class="order-details">
        <view class="goods-item">
          <image class="goods-image" :src="orderInfo.goodsImage" mode="aspectFill"></image>
          <view class="goods-info">
            <view class="goods-name">{{orderInfo.goodsName}}</view>
            <view class="goods-specs">{{orderInfo.goodsSpecs}}</view>
            <view class="goods-price-count">
              <text class="goods-price">¥{{orderInfo.goodsPrice}}</text>
              <text class="goods-count">x{{orderInfo.goodsCount}}</text>
            </view>
          </view>
        </view>
        <view class="order-summary">
          <view class="summary-item">
            <text class="label">商品总价</text>
            <text class="value">¥{{orderInfo.totalAmount}}</text>
          </view>
          <view class="summary-item">
            <text class="label">运费</text>
            <text class="value">¥{{orderInfo.shippingFee}}</text>
          </view>
          <view class="summary-item total">
            <text class="label">实付金额</text>
            <text class="value">¥{{orderInfo.totalAmount}}</text>
          </view>
        </view>
      </view>
    </view>

         <!-- 支付方式选择 -->
     <view class="payment-methods-card">
       <view class="card-header">
         <u-icon name="credit-card" size="20" color="#ff4444"></u-icon>
         <text class="header-title">支付方式</text>
       </view>
       <view class="payment-options">
         <view class="payment-option active">
           <view class="option-left">
             <u-icon name="wallet-fill" size="24" color="#1677ff"></u-icon>
             <text class="option-name">支付宝支付</text>
           </view>
           <u-icon name="checkmark-circle-fill" size="20" color="#ff4444"></u-icon>
         </view>
       </view>
     </view>

    <!-- 支付按钮 -->
    <view v-if="!isLoading && !loadError" class="payment-button-section">
      <view class="payment-amount">
        <text class="amount-label">支付金额</text>
        <text class="amount-value">¥{{orderInfo.totalAmount}}</text>
      </view>
             <button class="pay-button" @click="confirmPayment">
        <text>立即支付</text>
      </button>
    </view>

    
  </view>
</template>

<script>
import {get,post,del,put} from '../../utils/request.js'

export default {
  name: 'Payment',
  data() {
    return {
      orderInfo: {
        id: '',
        goodsImage: '',
        goodsName: '',
        goodsSpecs: '',
        goodsPrice: '0.00',
        goodsCount: 0,
        totalAmount: '0.00',
        shippingFee: '0.00'
      },
      isLoading: true, // 添加加载状态
      loadError: false // 添加加载错误状态
    }
  },
  onLoad(options) {
    // 接收从订单列表传递过来的订单ID
    if (options.orderId) {
      this.orderInfo.id = options.orderId;
      console.log('接收到订单ID:', this.orderId);
      // 根据订单ID获取订单信息
      this.fetchOrderInfo(options.orderId);
    } else if (options.orderData) {
      // 兼容旧的传递方式
      try {
        this.orderInfo = JSON.parse(decodeURIComponent(options.orderData));
        console.log('接收到订单数据:', this.orderInfo);
      } catch (e) {
        console.error('解析订单数据失败:', e);
      }
    } else {
      console.error('未接收到订单ID或订单数据');
      uni.showToast({
        title: '订单信息缺失',
        icon: 'none'
      });
    }
  },
  methods: {
    // 根据订单ID获取订单信息
    async fetchOrderInfo(orderId) {
      try {
        console.log('开始获取订单信息，订单ID:', orderId);
        this.isLoading = true;
        this.loadError = false;
        
        // 调用后端API获取订单信息
        const response = await get(`/orderst/${orderId}`);
        
        console.log('获取订单信息响应:', response);
        
        if (response && response.code === 200 && response.data) {
          const orderData = response.data;
          
          // 更新订单信息
          this.orderInfo = {
            id: orderData.orderId || orderData.orderNumber || orderId,
            goodsImage: orderData.goodsimg || '/static/logo.png',
            goodsName: orderData.goodsname || '商品名称',
            goodsSpecs: orderData.goodsSpecs || '商品规格',
            goodsPrice: orderData.goodsprice || '0.00',
            goodsCount: parseInt(orderData.goodsnumber) || 1,
            totalAmount: (parseFloat(orderData.goodsprice || 0) * parseInt(orderData.goodsnumber || 1)).toFixed(2),
            shippingFee: (parseFloat(orderData.orderPostPrice || 0)).toFixed(2)
          };
          
          console.log('订单信息获取成功:', this.orderInfo);
        } else {
          throw new Error(response?.message || '获取订单信息失败');
        }
      } catch (error) {
        console.error('获取订单信息失败:', error);
        this.loadError = true;
        
        // 如果获取失败，使用默认数据
        this.orderInfo = {
          id: orderId,
          goodsImage: '/static/logo.png',
          goodsName: '商品信息获取失败',
          goodsSpecs: '规格信息获取失败',
          goodsPrice: '0.00',
          goodsCount: 1,
          totalAmount: '0.00',
          shippingFee: '0.00'
        };
      } finally {
        this.isLoading = false;
      }
    },
    
    // 重新加载订单信息
    retryLoad() {
      if (this.orderInfo.id) {
        this.fetchOrderInfo(this.orderInfo.id);
      }
    },
    
    // 返回上一页
    goBack() {
      uni.navigateBack({
        delta: 1
      })
    },
    
    // 确认支付
    confirmPayment() {
      this.processPayment();
    },
    
    // 处理支付
    async processPayment() {
      uni.showLoading({
        title: '支付处理中...'
      });
      
      try {
        // 调用支付接口
        const paymentResult = await this.callPaymentAPI();
        
        if (paymentResult.success) {
          console.log('支付成功，开始更新订单状态');
          
          // 更新加载提示
          uni.showLoading({
            title: '更新订单状态...'
          });
          
          // 支付成功后更新订单状态
          await this.updateOrderStatus();
          
          console.log('订单状态更新完成，准备返回订单列表');
          uni.hideLoading();
          
          // 显示支付成功提示
          uni.showToast({
            title: '支付成功！',
            icon: 'success',
            duration: 2000
          });
          
          // 延迟一下再返回，让用户看到成功提示
          setTimeout(() => {
            // 直接返回订单列表页面
            uni.navigateBack({
              delta: 1
            });
          }, 1500);
        } else {
          throw new Error(paymentResult.message || '支付失败');
        }
      } catch (error) {
        uni.hideLoading();
        uni.showToast({
          title: error.message || '支付失败，请重试',
          icon: 'none'
        });
      }
    },
    
    // 调用支付API
    callPaymentAPI() {
      return new Promise((resolve) => {
        // 模拟支付API调用
        setTimeout(() => {
          resolve({
            success: true,
            message: '支付成功'
          });
        }, 2000);
      });
    },
    
    // 更新订单状态
    async updateOrderStatus() {
      try {
        console.log('开始更新订单状态，订单ID:', this.orderInfo.id);
        
        // 先获取当前订单状态
        const currentOrderResponse = await get(`/orderst/${this.orderInfo.id}`);
        let currentStatus = 0; // 默认待付款状态
        
        if (currentOrderResponse && currentOrderResponse.code === 200 && currentOrderResponse.data) {
          currentStatus = currentOrderResponse.data.orderStatus || 0;
          console.log('当前订单状态:', currentStatus);
        }
        
        // 调用后端API更新订单状态
        // 使用现有的PUT接口，传递完整的订单对象
        const orderUpdateData = {
          orderId: this.orderInfo.id,
          orderStatus: 3 // 已完成状态
        };
        
        console.log('准备更新的订单数据:', orderUpdateData);
        const response = await put(`/orderst`, orderUpdateData);
        
        console.log('后端API响应:', response);
        
        if (response && response.code === 200) {
          console.log(`订单状态更新成功，状态从${currentStatus}改为3`);
          
          // 通知订单列表页面刷新数据
          uni.$emit('orderStatusUpdated', {
            orderId: this.orderInfo.id,
            oldStatus: currentStatus,
            newStatus: 3
          });
          
          console.log('已发送状态更新事件，订单ID:', this.orderInfo.id, '旧状态:', currentStatus, '新状态:', 3);
          
          // 添加延迟确保事件发送完成
          await new Promise(resolve => setTimeout(resolve, 100));
          console.log('状态更新事件发送完成');
        } else {
          throw new Error(response?.message || '订单状态更新失败');
        }
      } catch (error) {
        console.error('更新订单状态失败:', error);
        uni.showToast({
          title: '订单状态更新失败',
          icon: 'none'
        });
        // 即使更新状态失败，也不影响支付流程
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.payment-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx;
}

.custom-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  background-color: #ffffff;
  border-bottom: 1rpx solid #f0f0f0;
  
  .navbar-left {
    width: 60rpx;
    display: flex;
    align-items: center;
  }
  
  .navbar-title {
    font-size: 32rpx;
    font-weight: 500;
    color: #333333;
  }
  
  .navbar-right {
    width: 60rpx;
  }
}

.order-info-card, .payment-methods-card {
  background-color: #ffffff;
  margin: 20rpx 30rpx;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
  
  .card-header {
    display: flex;
    align-items: center;
    margin-bottom: 30rpx;
    
    .header-title {
      font-size: 30rpx;
      font-weight: 500;
      color: #333;
      margin-left: 15rpx;
    }
  }
}

// 加载状态样式
.loading-state, .error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60rpx 0;
  
  .loading-text, .error-text {
    font-size: 28rpx;
    color: #666;
    margin-top: 20rpx;
  }
  
  .retry-button {
    margin-top: 30rpx;
    padding: 20rpx 40rpx;
    background-color: #ff4444;
    color: #ffffff;
    border: none;
    border-radius: 40rpx;
    font-size: 26rpx;
  }
}

.order-details {
  .goods-item {
    display: flex;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
    
    .goods-image {
      width: 160rpx;
      height: 160rpx;
      border-radius: 8rpx;
      background-color: #f5f5f5;
      flex-shrink: 0;
    }
    
    .goods-info {
      flex: 1;
      margin-left: 20rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      
      .goods-name {
        font-size: 28rpx;
        color: #333;
        line-height: 1.4;
        margin-bottom: 10rpx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      
      .goods-specs {
        font-size: 24rpx;
        color: #999;
        margin-bottom: 10rpx;
      }
      
      .goods-price-count {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .goods-price {
          font-size: 28rpx;
          color: #333;
          font-weight: 500;
        }
        
        .goods-count {
          font-size: 24rpx;
          color: #999;
        }
      }
    }
  }
  
  .order-summary {
    padding-top: 20rpx;
    
    .summary-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15rpx;
      
      .label {
        font-size: 26rpx;
        color: #666;
      }
      
      .value {
        font-size: 26rpx;
        color: #333;
      }
      
      &.total {
        border-top: 1rpx solid #f0f0f0;
        padding-top: 15rpx;
        margin-top: 15rpx;
        
        .label {
          font-size: 28rpx;
          font-weight: 500;
          color: #333;
        }
        
        .value {
          font-size: 32rpx;
          font-weight: 600;
          color: #ff4444;
        }
      }
    }
  }
}

.payment-options {
  .payment-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
    
    &.active {
      .option-name {
        color: #ff4444;
      }
    }
    
    .option-left {
      display: flex;
      align-items: center;
      
      .option-name {
        font-size: 28rpx;
        color: #333;
        margin-left: 15rpx;
      }
      
      .balance-amount {
        font-size: 24rpx;
        color: #999;
        margin-left: 10rpx;
      }
    }
  }
}

.payment-button-section {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  padding: 20rpx 30rpx;
  border-top: 1rpx solid #f0f0f0;
  
  .payment-amount {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    
    .amount-label {
      font-size: 26rpx;
      color: #666;
    }
    
    .amount-value {
      font-size: 36rpx;
      font-weight: 600;
      color: #ff4444;
    }
  }
  
  .pay-button {
    width: 100%;
    height: 80rpx;
    background-color: #ff4444;
    color: #ffffff;
    border: none;
    border-radius: 40rpx;
    font-size: 30rpx;
    font-weight: 500;
    
    &:disabled {
      background-color: #cccccc;
    }
  }
}


</style -->>
<template>
  <view class="payment-container">
    <!-- 自定义导航栏 -->
    <view class="custom-navbar">
      <view class="navbar-left" @click="goBack">
        <u-icon name="arrow-left" size="20" color="#333"></u-icon>
      </view>
      <view class="navbar-title">订单支付</view>
      <view class="navbar-right"></view>
    </view>

    <!-- 订单信息卡片 -->
    <view class="order-info-card">
      <view class="card-header">
        <u-icon name="shopping-cart" size="20" color="#ff4444"></u-icon>
        <text class="header-title">订单信息</text>
      </view>
      
      <!-- 加载状态 -->
      <view v-if="isLoading" class="loading-state">
        <u-loading-icon mode="spinner" size="40"></u-loading-icon>
        <text class="loading-text">正在获取订单信息...</text>
      </view>
      
      <!-- 错误状态 -->
      <view v-else-if="loadError" class="error-state">
        <u-icon name="error-circle" size="40" color="#ff4444"></u-icon>
        <text class="error-text">订单信息获取失败</text>
        <button class="retry-button" @click="retryLoad">重新加载</button>
      </view>
      
      <!-- 订单详情 -->
      <view v-else class="order-details">
        <view class="goods-item">
          <image class="goods-image" :src="orderInfo.goodsImage" mode="aspectFill"></image>
          <view class="goods-info">
            <view class="goods-name">{{orderInfo.goodsName}}</view>
            <view class="goods-specs">{{orderInfo.goodsSpecs}}</view>
            <view class="goods-price-count">
              <text class="goods-price">¥{{orderInfo.goodsPrice}}</text>
              <text class="goods-count">x{{orderInfo.goodsCount}}</text>
            </view>
          </view>
        </view>
        <view class="order-summary">
          <view class="summary-item">
            <text class="label">商品总价</text>
            <text class="value">¥{{orderInfo.totalAmount}}</text>
          </view>
          <view class="summary-item">
            <text class="label">运费</text>
            <text class="value">¥{{orderInfo.shippingFee}}</text>
          </view>
          <view class="summary-item total">
            <text class="label">实付金额</text>
            <text class="value">¥{{orderInfo.totalAmount}}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 支付方式选择 -->
    <view class="payment-methods-card">
      <view class="card-header">
        <u-icon name="credit-card" size="20" color="#ff4444"></u-icon>
        <text class="header-title">支付方式</text>
      </view>
      <view class="payment-options">
        <view class="payment-option active">
          <view class="option-left">
            <u-icon name="wallet-fill" size="24" color="#1677ff"></u-icon>
            <text class="option-name">支付宝支付</text>
          </view>
          <u-icon name="checkmark-circle-fill" size="20" color="#ff4444"></u-icon>
        </view>
      </view>
    </view>

    <!-- 支付按钮 -->
    <view v-if="!isLoading && !loadError" class="payment-button-section">
      <view class="payment-amount">
        <text class="amount-label">支付金额</text>
        <text class="amount-value">¥{{orderInfo.totalAmount}}</text>
      </view>
      <button class="pay-button" @click="confirmPayment">
        <text>立即支付</text>
      </button>
    </view>
  </view>
</template>

<script>
import {get,post,del,put} from '../../utils/request.js'

export default {
  name: 'Payment',
  data() {
    return {
      orderInfo: {
        id: '',
        goodsImage: '',
        goodsName: '',
        goodsSpecs: '',
        goodsPrice: '0.00',
        goodsCount: 0,
        totalAmount: '0.00',
        shippingFee: '0.00'
      },
      isLoading: true,
      loadError: false
    }
  },
  onLoad(options) {
    if (options.orderId) {
      this.orderInfo.id = options.orderId;
      console.log('接收到订单ID:', options.orderId);
      this.fetchOrderInfo(options.orderId);
    }
  },
  methods: {
    // 根据订单ID获取订单信息
    async fetchOrderInfo(orderId) {
      try {
        console.log('开始获取订单信息，订单ID:', orderId);
        this.isLoading = true;
        this.loadError = false;
        
        const response = await get(`/orderst/${orderId}`);
        console.log('获取订单信息响应:', response);
        
        if (response && response.code === 200 && response.data) {
          const orderData = response.data;
          
          this.orderInfo = {
            id: orderData.orderId || orderData.orderNumber || orderId,
            goodsImage: orderData.goodsimg || '/static/logo.png',
            goodsName: orderData.goodsname || '商品名称',
            goodsSpecs: orderData.goodsSpecs || '商品规格',
            goodsPrice: orderData.goodsprice || '0.00',
            goodsCount: parseInt(orderData.goodsnumber) || 1,
            totalAmount: (parseFloat(orderData.goodsprice || 0) * parseInt(orderData.goodsnumber || 1)).toFixed(2),
            shippingFee: (parseFloat(orderData.orderPostPrice || 0)).toFixed(2)
          };
          
          console.log('订单信息获取成功:', this.orderInfo);
        } else {
          throw new Error(response?.message || '获取订单信息失败');
        }
      } catch (error) {
        console.error('获取订单信息失败:', error);
        this.loadError = true;
        this.orderInfo = {
          id: orderId,
          goodsImage: '/static/logo.png',
          goodsName: '商品信息获取失败',
          goodsSpecs: '规格信息获取失败',
          goodsPrice: '0.00',
          goodsCount: 1,
          totalAmount: '0.00',
          shippingFee: '0.00'
        };
      } finally {
        this.isLoading = false;
      }
    },
    
    // 重新加载订单信息
    retryLoad() {
      if (this.orderInfo.id) {
        this.fetchOrderInfo(this.orderInfo.id);
      }
    },
    
    // 返回上一页
    goBack() {
      uni.navigateBack({
        delta: 1
      })
    },
    
    // 确认支付
    confirmPayment() {
      this.processPayment();
    },
    
    // 处理支付
    async processPayment() {
      try {
        uni.showLoading({
          title: '支付处理中...',
          mask: true
        });
        
        // 1. 调用支付API
        const paymentResult = await this.callPaymentAPI();
        if (!paymentResult.success) {
          throw new Error(paymentResult.message);
        }
        
        // 2. 更新订单状态
        uni.showLoading({
          title: '更新订单状态...',
          mask: true
        });
        
        const updateResult = await this.updateOrderStatus();
        if (!updateResult.success) {
          throw new Error(updateResult.message);
        }
        
        // 3. 显示成功提示
        uni.hideLoading();
        uni.showToast({
          title: '支付成功！',
          icon: 'success',
          duration: 2000
        });
        
        // 4. 返回上一页
        setTimeout(() => {
          uni.navigateBack();
        }, 1500);
      } catch (error) {
        uni.hideLoading();
        uni.showToast({
          title: error.message || '支付失败，请重试',
          icon: 'none'
        });
      }
    },
    
    // 调用支付API
    callPaymentAPI() {
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve({
            success: true,
            message: '支付成功'
          });
        }, 2000);
      });
    },
    
    // 更新订单状态
    async updateOrderStatus() {
      try {
        console.log('开始更新订单状态，订单ID:', this.orderInfo.id);
        
        // 先获取当前订单状态
        const currentOrderResponse = await get(`/orderst/${this.orderInfo.id}`);
        let currentStatus = 0;
        
        if (currentOrderResponse && currentOrderResponse.code === 200 && currentOrderResponse.data) {
          currentStatus = currentOrderResponse.data.orderStatus || 0;
          console.log('当前订单状态:', currentStatus);
        }
        
        // 调用后端API更新订单状态
        const orderUpdateData = {
          orderId: this.orderInfo.id,
          orderStatus: 1 // 支付成功后设置为待发货状态
        };
        
        console.log('准备更新的订单数据:', orderUpdateData);
        const response = await put(`/orderst`, orderUpdateData);
        console.log('后端API响应:', response);
        
        if (response && response.code === 200) {
          console.log(`订单状态更新成功，状态从${currentStatus}改为1`);
          
          // 通知订单列表页面刷新数据
          uni.$emit('orderStatusUpdated', {
            orderId: this.orderInfo.id,
            oldStatus: currentStatus,
            newStatus: 1
          });
          
          return { success: true };
        } else {
          throw new Error(response?.message || '订单状态更新失败');
        }
      } catch (error) {
        console.error('更新订单状态失败:', error);
        return { success: false, message: error.message };
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.payment-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx;
}

.custom-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  background-color: #ffffff;
  border-bottom: 1rpx solid #f0f0f0;
  
  .navbar-left {
    width: 60rpx;
    display: flex;
    align-items: center;
  }
  
  .navbar-title {
    font-size: 32rpx;
    font-weight: 500;
    color: #333333;
  }
  
  .navbar-right {
    width: 60rpx;
  }
}

.order-info-card, .payment-methods-card {
  background-color: #ffffff;
  margin: 20rpx 30rpx;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
  
  .card-header {
    display: flex;
    align-items: center;
    margin-bottom: 30rpx;
    
    .header-title {
      font-size: 30rpx;
      font-weight: 500;
      color: #333;
      margin-left: 15rpx;
    }
  }
}

.loading-state, .error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60rpx 0;
  
  .loading-text, .error-text {
    font-size: 28rpx;
    color: #666;
    margin-top: 20rpx;
  }
  
  .retry-button {
    margin-top: 30rpx;
    padding: 20rpx 40rpx;
    background-color: #ff4444;
    color: #ffffff;
    border: none;
    border-radius: 40rpx;
    font-size: 26rpx;
  }
}

.order-details {
  .goods-item {
    display: flex;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
    
    .goods-image {
      width: 160rpx;
      height: 160rpx;
      border-radius: 8rpx;
      background-color: #f5f5f5;
      flex-shrink: 0;
    }
    
    .goods-info {
      flex: 1;
      margin-left: 20rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      
      .goods-name {
        font-size: 28rpx;
        color: #333;
        line-height: 1.4;
        margin-bottom: 10rpx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      
      .goods-specs {
        font-size: 24rpx;
        color: #999;
        margin-bottom: 10rpx;
      }
      
      .goods-price-count {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .goods-price {
          font-size: 28rpx;
          color: #333;
          font-weight: 500;
        }
        
        .goods-count {
          font-size: 24rpx;
          color: #999;
        }
      }
    }
  }
  
  .order-summary {
    padding-top: 20rpx;
    
    .summary-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15rpx;
      
      .label {
        font-size: 26rpx;
        color: #666;
      }
      
      .value {
        font-size: 26rpx;
        color: #333;
      }
      
      &.total {
        border-top: 1rpx solid #f0f0f0;
        padding-top: 15rpx;
        margin-top: 15rpx;
        
        .label {
          font-size: 28rpx;
          font-weight: 500;
          color: #333;
        }
        
        .value {
          font-size: 32rpx;
          font-weight: 600;
          color: #ff4444;
        }
      }
    }
  }
}

.payment-options {
  .payment-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
    
    &.active {
      .option-name {
        color: #ff4444;
      }
    }
    
    .option-left {
      display: flex;
      align-items: center;
      
      .option-name {
        font-size: 28rpx;
        color: #333;
        margin-left: 15rpx;
      }
    }
  }
}

.payment-button-section {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  padding: 20rpx 30rpx;
  border-top: 1rpx solid #f0f0f0;
  
  .payment-amount {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    
    .amount-label {
      font-size: 26rpx;
      color: #666;
    }
    
    .amount-value {
      font-size: 36rpx;
      font-weight: 600;
      color: #ff4444;
    }
  }
  
  .pay-button {
    width: 100%;
    height: 80rpx;
    background-color: #ff4444;
    color: #ffffff;
    border: none;
    border-radius: 40rpx;
    font-size: 30rpx;
    font-weight: 500;
  }
}
</style>
